<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
    status: "error" | "success"
}>();

const config = computed(() => {
    const map = {
        error: {
            text: "有缺件",
            color: 'red'
        },
        success: {
            text: "缺件已处理",
            color: 'green'
        }
    }
    return map[props.status];
})
</script>

<template>
    <view class="missing-tag-container" :style="{ borderColor: config.color, color: config.color }">{{ config.text }}</view>
</template>

<style lang="less" scoped>
.missing-tag-container {
    width: 280px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 36px;
    font-weight: 500;

    border: 1px solid;

    transform: rotate(40deg);

}
</style>